<template>
  <div class="div_middle_friends">
    <CScrollbar class="div_right_friends_crollbar" width="288px"
                height="780px">

      <div class="div_new_friend">
        <div class="div_new_friend_title font_style">
          新的朋友
        </div>
        <div class="div_new_friend_hover">
          <div class="div_new_friend_body class_hover">
            <div class="div_middle_friends_li_photo">
              <!--头像. -->
              <img class="div_middle_friends_li_photo_img" :src="require('../../assets/middle_session_photo_42.jpg')"
                   alt="">
            </div>
            <div class="div_middle_friends_li_title">
              <div class="div_middle_friends_title_name">
                新的朋友
              </div>
            </div>
          </div>
        </div>
      </div>

      <div>
        <div class="div_group_title font_style">
          群聊
        </div>
        <div class="div_group_hover">
          <!--          <div class="div_group_body">-->
          <!--            <div class="div_middle_friends_li_photo">-->
          <!--              &lt;!&ndash;头像. &ndash;&gt;-->
          <!--              <img class="div_middle_friends_li_photo_img" :src="require('../../assets/middle_session_photo_42.jpg')"-->
          <!--                   alt="">-->
          <!--            </div>-->
          <!--            <div class="div_middle_friends_li_title">-->
          <!--              <div class="div_middle_friends_title_name">-->
          <!--                默认群组-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--                        :class="[user.Id === this.$store.state.chartStatus.nowFriendUid ? 'showChart' : 'shutDownChart']"
          -->
          <ul class="middle_friends_ul">
            <li v-for="group in this.$store.state.chartStatus.allGroup" :key="group" class="middle_friends_ul_li"
                @click="showGroup(group)">
              <div class="div_middle_friends_li_photo">
                <img class="div_middle_friends_li_photo_img" :src="group.group_img_url"
                     alt="">
              </div>
              <div class="div_middle_friends_li_title">
                <div class="div_middle_friends_title_name">
                  {{ group.group_name }}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div>
        <div class="div_me_friend_title font_style">
          我的好友.
        </div>
        <div>
          <ul class="middle_friends_ul">
            <li v-for="user in this.$store.state.chartStatus.allFriends" :key="user" class="middle_friends_ul_li"
                :class="[user.Id === this.$store.state.chartStatus.nowFriendUid ? 'showChart' : 'shutDownChart']"
                @click="showFriend(user)">
              <div class="div_middle_friends_li_photo">
                <img class="div_middle_friends_li_photo_img" :src="user.friend_img_url"
                     alt="">
              </div>
              <div class="div_middle_friends_li_title">
                <div class="div_middle_friends_title_name">
                  {{ user.friend_name }}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </CScrollbar>
  </div>
</template>

<script>

import {CScrollbar} from "c-scrollbar"

export default {
  name: "middle_friends",
  components: {
    CScrollbar
  },
  methods: {
    showFriend(user) {
      // 修改当前选中好友的状态 .
      this.$store.commit('ChangeNowFriendUid', user.uid)
    },
    showGroup() {
    },
  },
  mounted() {
    console.log("all friends")
    console.log(this.$store.state.chartStatus.allFriends)
  }
}
</script>

<style scoped>
.div_right_friends_crollbar {
  width: 250px;
  position: absolute;
}

.div_middle_friends {
  /*width: 100px;*/
  margin-top: 5px;
}

.middle_friends_ul {
  list-style: none;
  margin-left: -40px;
  margin-top: 0px;
}

.middle_friends_ul_li {
  width: 100%;
  height: 67px;
}

.div_middle_friends_li_photo {
  display: inline-block;
  height: 100%;
  width: 60px;
  vertical-align: top;
}

.div_middle_friends_li_photo_img {
  border-radius: 6px;
  position: relative;
  margin-top: 12px;
  margin-left: 14px;
  width: 42px;
  height: 42px;
}

.div_middle_friends_li_title {
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin-top: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 4px;
}

.div_middle_friends_title_name {
  font-weight: 500;
  font-size: 15px;
}


.div_middle_friends_li_time {
  display: inline-block;
  margin-top: 22px;
  margin-left: 80px;
}

/*235, 235, 235*/
.showChart {
  background-color: #ebebeb;
}

.shutDownChart {
  /*background-color: #f7ba2a;*/
}

.middle_friends_ul li:hover {
  background-color: #ebebeb;
}


/*-----------------------------*/
.div_new_friend_title {
  color: #999999;
  margin-top: 4px;
}

.div_new_friend_body {
  height: 67px;
  /*background-color: #ebebeb;*/
  width: 100%;
}

.div_group_title {
  color: #999999;
}

.div_group_body {
  height: 67px;
  /*background-color: #ebebeb;*/
  width: 100%;
}

.div_me_friend_title {
  color: #999999;
}

.font_style {
  font-size: 13px;
  margin-left: 13px;
}

.div_new_friend_hover :hover {
  background-color: #ebebeb;
}

.div_group_hover :hover {
  background-color: #ebebeb;
}

</style>